<template>
    <a-drawer :title="titleMap" :width="550" :visible.sync="visible"
    :body-style="{ 'padding-top': '0px', paddingBottom: '80px' }" @close="close">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" layout="horizontal">
      <a-form-item :label="$t('menu.list.search-list.projects')">
        <a-input
          v-decorator="['appName', { rules: [{ required: true, message: $t('user.verification-code.required111566110577212') }] }]"
          :placeholder="$t('menu.list.search-list.applications')" disabled/>
      </a-form-item>
      <a-form-item :label="$t('menu.profile')">
        <a-select :placeholder="$t('menu.profile.basic')"
          v-decorator="['appOwner', { rules: [{ required: true, message: $t('user.verification-code.required111566110577213') }] }]"
          option-filter-prop="children" :filter-option="filterOption" show-search disabled>
          <a-select-option v-for="item in userList" :value="item.value" :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('menu.profile.advanced')">
        <a-select :placeholder="$t('menu.result')" disabled
          v-decorator="['appDepartment', { rules: [{ required: true, message: $t('user.verification-code.required111566110577214') }] }]">
          <a-select-option v-for="item in appList" :value="item.label" :key="item.value" >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="enterprise APP ID">
        <a-input v-decorator="['BmwAppId']" placeholder="enterprise APP ID" disabled/>
      </a-form-item>
      <a-form-item label="enterprise APP ID">
        <a-input v-decorator="['BbaAppId']" placeholder="enterprise APP ID" disabled/>
      </a-form-item>
      <a-form-item label="Feature ID">
        <a-input v-decorator="['FeatherId']" placeholder="Feature ID" disabled/>
      </a-form-item>
      <a-form-item :label="$t('menu.exception.not-permission')">
        <a-textarea v-decorator="['appRemarks']" :placeholder="$t()" :rows="4" disabled/>
      </a-form-item>
      <a-form-item label="ID" v-if="mode == 1" class="hidden">
        <a-input v-decorator="['id']" />
      </a-form-item>
    </a-form>
    <div class="absolute right-0 bottom-0 w-full px-4 py-[10px] bg-white text-left z-1 flex justify-center">
      <a-row class="w-full" :gutter="24">
        <a-col :span="24">
          <a-button class="w-full border-none hover:bg-[#3F8CFF] hover:bg-opacity-5 shadow" @click="close">{{
            $t('app.setting.themecolor.rr') }}</a-button>
        </a-col>
        <!-- <a-col :span="12"> -->
          <!-- <a-button :loading="loading" class="w-full border-none shadow" type="primary" @click.native.prevent="submit()">
            <span v-if="!loading">{{ $t('app.setting.themecolor.ss') }}</span>
            <span v-else>{{ $t('app.setting.themecolor.tt') }}...</span>
          </a-button> -->
        <!-- </a-col> -->
      </a-row>
    </div>
  </a-drawer>
  </template>
  
  <script>
  

  import { userQuery } from '@/api/common/form'
  
  export default {
    props:{
        editId: {
      type: Number
    }
  },
    data() {
      return {
        // 下面这些都是通用的
        form: this.$form.createForm(this),
        visible: false,
        loading: false,
        userList: [],
        appList:[],
        // 这个要根据服务修改title
        // titleMap: ['新建数据盘库', '修改数据盘库'],
        titleMap: '',
        mode: 0,
      }
    },
    mounted() { },
    methods: {
      filterOption(input, option) {
        return (
            option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      /**
       *
       * @param {*} data 列表传过来的值
       */
      async open(data) {
        this.titleMap=this.$t('user.verification-code.required11156611057737144')
        this.visible = true
        // 获取用户列表下拉
        const { data: userList } = await userQuery(1);
        this.userList = userList
        await this.$nextTick()
        this.form.setFieldsValue({
          appName: data.AppName,
          appOwner: data.AppOwner,
          appDepartment: data.AppDepartment,
          appRemarks: data.AppRemarks,
          id: data.Id,
          FeatherId:data.FeatherId,
          BmwAppId:data.BmwAppId,
          BbaAppId:data.BbaAppId,
        })
      },
      // 关闭 通用的 
      close() {
        // 修改侧边栏状态
        this.visible = false
        // 清空form的值
        this.form.resetFields()
      },
    },
  }
  </script>
  